<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
         <!-- 开发环境版本，包含了有帮助的命令行警告 -->
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
         <style>
             .active{
                 color:red;
             }
             .big{
                 font-size: 30px;
                 background-color:green;
             }
         </style>
    </head>
    <body>
        <div id="app">
            <div>
                问一个 yes/no 的问题:
                <input v-model="question">
            </div>
              <div>{{ answer }}</div>
            </div>
            <script>
                var app = new Vue({
                    el: '#app',
                data: {
                    question: '',
                    answer: '除非你提出问题，否则我不能给你答案!'
                    
                  },
                  watch:{
                    question: function (newQuestion, oldQuestion) {
                        this.answer = '等待您停止键入问题...'
                        this.debouncedGetAnswer();
                        console.log('debouncedGetAnswer被调用');
                     }
                  },
                  created:function(){
                        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
                  },
                  methods:{
                    getAnswer: function () {
                         if(this.question.indexOf('?') === -1) {
                           this.answer = '问题需要包含问号.';
                           console.log('getAnswer方法被调用');
                           return
                     }
                       this.answer='等待...'
                       var vm =this
                       axios.get('https://yesno.wtf/api')
                       .then(function (response) {
                        vm.answer = _.capitalize(response.data.answer)
                       })
                      .catch(function (error) {
                         vm.answer = 'Error! Could not reach the API. ' + error
                       })
                    }
                    }
               })
             
            </script>

            <hr width="1500" align="left">

            <div id="ppd">
                <div v-bind:class="{active:isActive, big:isBig}">练习</div>
                <div v-bind:class="show">练习1</div>
                <div v-bind:class="shop">练习2</div>               
            </div>
            <script>
                var ppd = new Vue({
                    el:"#ppd",
                    data:{
                        isActive:true,
                        isBig:true,
                        show:{
                            active:true,
                            big:false
                        },
                        shop:{
                            active:true,
                            big:true
                        }
                    },
                })
            </script>

            <hr width="1500" align="left">

            <div id="app-1">
                <div v-bind:style="{color: color,'font-size': size}">演示</div>
                <div v-bind:style="show">演示1</div>
                <div v-bind:style="[show,show2]">演示2</div>               
            </div>
            <script>
                var app1 = new Vue({
                    el:"#app-1",
                    data:{
                        color:'red',
                        size:'30px',
                        show:{
                            color:'blue',
                            'font-size':'36px'
                        },
                        show2:{
                            color:'yellow'
                        }
                    },
                })
            </script>
 </body>
 </html>            